<template>
	<el-row>
		<el-col :span="24">
			<div>
				<div id="all">
					<el-input size="mini" v-model="input" placeholder="请输入标题关键字" clearable @clear="notice()"></el-input>
					<el-input size="mini" v-model="inpute" placeholder="请输入内容关键字" clearable class="input"
						@clear="notice()"></el-input>
					<el-button size="mini" type="primary" icon="el-icon-search" class="search" @click="notice()">搜索
					</el-button>
					<!-- //导出 -->
					<div class="home">
						<download-excel class="export-excel-wrapper" :data="tableData" :fields="json_fields" type="xls"
							worksheet="My Worksheet" name="用户信息">
							<el-button size="mini" type="primary" icon="el-icon-download">导出</el-button>
						</download-excel>
					</div>
				</div>
				<div style="text-align: right;margin-bottom: 5px;">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">添加
					</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="batcDele">批量删除</el-button>
				</div>
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange" border>
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="title" label="通知标题">
					</el-table-column>
					<el-table-column prop="content" label="通知详情">
						<template slot-scope="scope">
							<!--如果要用到scope.$index, scope.row，则需要加上slot-scope="scope"才能拿到值-->
							<el-button type="primary" size="mini" @click="see(scope.$index, scope.row)">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="addTime" label="添加时间">
					</el-table-column>
					<el-table-column prop="adminId" label="管理员ID">
					</el-table-column>
					<el-table-column prop="operation" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
							</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- //分页  "-->

				<div>
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="ljq.page" :page-sizes="[5, 10, 15, 20]" :page-size="ljq.num"
						layout="total, sizes, prev, pager, next, jumper" :total="ljq.total">
					</el-pagination>
				</div>


				<!-- //添加 -->
				<el-dialog title="创建" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-form-item label="通知标题" :label-width="formLabelWidth">
							<el-input v-model="form.title" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="通知内容" :label-width="formLabelWidth">
							<Links :init="editorInit" v-model="form.content"></Links>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="addTo()">确 定</el-button>
					</div>
				</el-dialog>


				<!-- //编辑 -->
				<el-dialog title="编辑" :visible.sync="dialogFormVisibles">
					<el-form :model="formEdit">
						<el-form-item label="通知标题" :label-width="formLabelWidth">
							<el-input v-model="formEdit.title" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="通知内容" :label-width="formLabelWidth">
							<Links :init="editorInit" v-model="formEdit.content"></Links>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisibles = false">取 消</el-button>
						<el-button type="primary" @click="edit()">确 定</el-button>
					</div>
				</el-dialog>

				<!-- //点击查看--弹框 -->
				<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
					<span v-html="html" style="text-align: center;"></span>
				</el-dialog>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	//富文本引入
	// npm install @tinymce/tinymce-vue@3.0.1 -s
	import Links from '@tinymce/tinymce-vue'
	import {
		noticeList,
		noticeDelete,
		batchCreate,
		batchUpdate,
		batchDelete
	} from '../../utils/axios.js'
	export default {
		components: {
			Links
		},
		data() {

			return {
				//导出
				json_fields: {
					标题: "title", //常规字段
					详情: "content", //支持嵌套属性
					时间: "addTime"
				},


				//点击查看
				centerDialogVisible: false,
				html: '',

				//添加--编辑
				gridData: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogTableVisibles: false,
				dialogFormVisibles: false,
				formLabelWidth: '120px',
				form: {
					content: '',
					title: ''
				},
				formEdit: {
					content: '',
					title: '',
					id: ''
				},


				//头部输入框
				input: '',
				inpute: '',

				//列表
				tableData: [],
				multipleSelection: [],

				//分页
				ljq: {
					page: 1, //默认前往几页
					num: 20, //默认一页几条
					total: 0 //共几条
				},

				//富文本编辑器
				editorInit: {
					language: 'zh_CN',
					height: 300,
					skin_url: "/skins/ui/oxide",
					convert_urls: false,
					plugins: [
						'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
					],
					toolbar: [
						'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
						'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
					],
					images_upload_handler: function(blobInfo, success, failure) {
						const formData = new FormData();
						formData.append('file', blobInfo.blob());
						createStorage(formData)
							.then(res => {
								success(res.data.data.url);
							})
							.catch(() => {
								failure('上传失败，请重新上传');
							});
					}
				},
			}
		},
		created() {
			this.notice()
		},
		methods: {
			//刷新块
			refresh() {
				this.$router.push({
					path: '/SkipBlank',
					query: {
						path: this.$route.path
					}
				})
			},

			//列表渲染
			notice() {
				noticeList(this.ljq.page, this.ljq.num, this.input, this.inpute).then(res => {
					// console.log(res)
					this.tableData = res.data.data.list
					this.ljq.total = res.data.data.total
				})
			},

			//分页
			handleSizeChange(new_num) {
				// console.log(newnum)
				this.ljq.num = new_num
				this.notice()
			},
			handleCurrentChange(new_page) {
				this.ljq.page = new_page
				this.notice()
			},


			//编辑
			edit() {
				let data = {
					id: this.formEdit.id,
					title: this.formEdit.title,
					content: this.formEdit.content
				}
				if (this.formEdit.title.length == '') {
					this.$notify.error({
						title: '错误',
						message: '参数不对'
					});
					return
				} else {
					batchUpdate(data).then(res => {
						// console.log(res)
						this.$notify({
							title: '成功',
							message: '更新广告成功',
							type: 'success'
						});
						this.dialogFormVisibles = false,
							this.notice()
					})
				}
			},
			//点击编辑打开弹框
			handleEdit(index, row) {
				// console.log(index, row);
				this.dialogFormVisibles = true
				this.formEdit.id = row.id
				this.formEdit.title = row.title
				this.formEdit.content = row.content
			},


			//查看
			see(index, row) {
				// console.log(row)
				this.centerDialogVisible = true
				this.html = row.content
			},


			//删除
			handleDelete(index, row) {
				// console.log(index, row);
				let data = {
					id: row.id,
					title: row.title,
					content: row.content
				}
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					noticeDelete(data).then(res => {
						this.$notify({
							title: '成功',
							message: '删除管理员成功',
							type: 'success'
						});
						this.notice() //删除后重新渲染
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//选中
			handleSelectionChange(val) {
				let all = [];
				for (var i = 0; i < val.length; i++) {
					all.push(val[i].id)
				}
				this.multipleSelection = all
			},


			//批量删除
			batcDele() {
				// console.log(this.multipleSelection)
				let data = {
					ids: this.multipleSelection
				}
				this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					batchDelete(data).then(res => {
						this.$notify({
							title: '成功',
							message: '删除管理员成功',
							type: 'success'
						});
						this.notice() //删除后重新渲染
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},


			//添加
			addTo() {
				let data = {
					title: this.form.title,
					content: this.form.content
				}
				if (this.form.title.length == '') {
					this.$notify.error({
						title: '错误',
						message: '参数不对'
					});
					return
				} else {
					batchCreate(data).then(res => {
						this.$notify({
							title: '成功',
							message: '添加管理员成功',
							type: 'success',
						});
						this.dialogFormVisible = false
						this.form.title = ''
						this.form.content = ''
						this.notice()
					})
				}
			},
		}
	}
</script>

<style lang="less">
	/* //字体居中 */
	.cell {
		text-align: center;
	}


	/* //头部搜索 */
	#all {
		display: flex;
		width: 40% !important;
	}

	.search {
		margin-left: 3px !important;
	}

	.input {
		margin-left: 3px !important;
	}

	#all .el-input .el-input__inner {
		background-color: #FFFFFF !important;
		caret-color: #434343 !important;
		color: #999999 !important;
		border: 1px solid #b9b9b9 !important;
	}

	/* //导出 */
	.home {
		height: 100%;
		background-color: rgb(128, 126, 126);
		border-radius: 6px;
		margin-left: 10px;
	}
</style>
